<template>
  <div class="avatar-uploader">
    <!-- 预览状态 -->
    <div v-if="showPreview" class="preview-wrapper">
      <img :src="fullImageUrl" class="avatar" @error="handleImageError">
      <i class="el-icon-close delete-icon" @click="handleRemove"></i>
    </div>

    <!-- 上传按钮 -->
    <div v-loading="uploading"
        v-else
        class="upload-area"
        @click="triggerFileInput"
        :class="{ 'uploading': uploading }"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <input
          ref="fileInput"
          type="file"
          hidden
          accept="image/*"
          @change="handleFileChange"
      >
    </div>
  </div>
</template>

<script>
// 内部固定域名配置
import {OSS_URL} from "@/assets/const/constData";

const BASE_URL = OSS_URL

export default {
  name: 'ImageUploader',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploading: false,
      imageLoadError: false
    }
  },
  computed: {
    // 完整图片地址（仅用于显示）
    fullImageUrl() {
      if (!this.value) return ''
      return this.value.startsWith('http')
          ? this.value
          : `${BASE_URL}${this.value.startsWith('/') ? '' : '/'}${this.value}`
    },

    // 是否显示预览
    showPreview() {
      return !!this.value && !this.imageLoadError
    }
  },
  methods: {
    // 触发文件选择
    triggerFileInput() {
      if (!this.uploading) {
        this.$refs.fileInput.click()
      }
    },

    // 处理文件上传
    async handleFileChange(e) {
      const file = e.target.files?.[0]
      if (!file) return

      try {
        this.uploading = true
        const res = await this.$http.upload({ file })

        // 关键：直接返回相对路径给父组件
        this.$emit('input', res.data)
      } catch (error) {
        this.$message.error('上传失败')
      } finally {
        this.uploading = false
        this.$refs.fileInput.value = ''
        this.imageLoadError = false
      }
    },

    // 删除图片
    handleRemove() {
      this.$emit('input', '')
      this.imageLoadError = false
    },

    // 图片加载失败处理
    handleImageError() {
      this.imageLoadError = true
      console.log('图片加载失败')
      // this.$message.error('图片加载失败')
    }
  }
}
</script>

<style scoped lang="scss">
/* 保持原有样式不变 */
.avatar-uploader {
  .preview-wrapper {
    position: relative;
    width: 178px;
    height: 178px;
    border-radius: 6px;
    overflow: hidden;

    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .delete-icon {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 5px;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      color: #f56c6c;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        transform: scale(1.1);
        background: #fff;
      }
    }
  }

  .upload-area {
    width: 178px;
    height: 178px;
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;

    &.uploading {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      transition: all 0.3s;
    }

    &:hover:not(.uploading) {
      border-color: #409EFF;

      .avatar-uploader-icon {
        color: #409EFF;
      }
    }
  }
}
</style>